<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/12 0012
  Time: 上午 9:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>拾光书城</title>
    <style>
      body{
        margin:0;
        padding: 0;
        font-family: sans-serif;
        background: url("images/login.jpg");
        background-size: cover;
        background-color: rgba(240, 255, 255, 0.5);
      }
      .box
      {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width:400px;
        padding: 40px;
        background:rgba(75, 81, 95, 0.3);
        box-sizing:border-box;
        box-shadow:7px 7px 17px rgba(52, 56, 66, 0.5);
        border-radius: 10px;/*登录窗口边角圆滑*/
      }
      .box h2
      {
        margin:0 0 30px;
        padding:0;
        color:#fff;
        text-align:center;
      }
      .box .inputBox
      {
        position:relative;
      }
      .box .inputBox input
      {
        width: 100%;
        padding: 10px 0;
        font-size: 16px;
        color: #fff;
        letter-spacing: 1px;
        margin-bottom:30px;/*输入框设置*/
        border:none;
        border-bottom:1px solid #fff;
        outline:none;
        background:transparent;
      }
      .box .inputBox label
      {
        position: absolute;
        top: 0;
        left: 0;
        padding: 10px 0;
        font-size: 16px;
        color: #fff;
        pointer-events: none;
        transition: .5s;
      }
      .box .inputBox input:focus ~ label,
      .box .inputBox input:valid ~ label
      {
        top: -18px;
        left: 0;
        color: #03a9f4;
        font-size: 12px;
      }
      .box  input[type="submit"]
         {
           background: transparent;
           border: none;
           outline: none;
           color: #fff;
           background: #03a9f4;
           padding: 10px 20px;
           cursor: pointer;
           border-radius: 5px;
         }
      .box  input[type="reset"]
      {
        background: transparent;
        border: none;
        outline: none;
        color: #fff;
        background: #03a9f4;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 5px;
      }
      .box  input[type="button"]
      {
        background: transparent;
        border: none;
        outline: none;
        color: #fff;
        background: #03a9f4;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 5px;
      }
      .b1
      {
        color: white;
        font-size: 60px;
        font-family: "楷体";
        font-weight: bold;
        text-align: center;
        margin: 50px;
        padding: 60px;
        text-shadow: aqua 1px 2px 1px;
      }


    </style>
  </head>
  <body>

  <p class="b1">欢迎来到拾光书城</p>


  <div class="box">
    <h2>登录</h2>
    <form action="staff/staffLogin">
      <div class="inputBox">
        <input type="text" name="username" required="">
        <label>用户名</label>
      </div>
      <div class="inputBox">
        <input type="password" name="pwd" required="">
        <label>密码</label>
      </div>
      <div align="center">
        <input type="submit"  value="登录">
        <a href="register.jsp"><input type="button"  value="注册"></a>
        <a href="login.jsp"><input type="reset" value="重置"></a>
      </div>
      <div align="center">
        ${loginErro}
      </div>
    </form>
  </div>
  </body>
</html>
